Ampliar imágenes con expando.js

Si pasas el puntero sobre la siguiente imagen verás que se puede ampliar a su tamaño original.

El mismo efecto lo podemos añadir a un grupo de imágenes.

Esto es posible gracias a un script proporcionado por Dynamic Drive, Los pasos son los siguientes, descargamos el script de Dynamic Drive expando.js y lo alojamos en el servidor que solemos usar. Luego nos dirigimos a nuestra plantilla y en Edición de HTML buscamos </head> justo antes lo añadimos de la siguiente forma:

<script src='aquí-url-del-script' type='text/javascript'/>

» Donde dice aquí-url-del-script los sustituimos por la url del script que alojamos anteriormente.

Hay otra opción y es añadir el script directamente a la plantilla, de esa forma evitaremos que el archivo deje de funcionar por problemas de alojamiento como puede ser superar la banda ancha o caídas del servidor. En este caso lo añadiremos también antes de </head> de esta forma:

<script type='text/javascript'>
//<![CDATA[
// Expando
/* Expando Image Script ©2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */

if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    im.title = '';
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };

  expConIm.ims = {};

  expConIm.r = new RegExp('\\bexpando\\b');

  if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
  }
  else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
  }
 })();
}
//]]>
</script>

Una vez lo tenemos añadido nos situamos justo antes de ]]></b:skin> y añadimos unos estilos para el contorno de las imágenes.

img.expando{
border: none;
vertical-align: top;
}

A esos estilos le podemos añadir diferente borde del que presentan nuestras imágenes, podéis ver algunos aquí. Si preferimos el borde igual al de las imágenes de nuestras entradas buscamos donde dice:

.post img {
aquí estarán los estilos
que podemos copiar y pegar
}

Para el ejemplo añadí:

img.expando{
background:#EFEFEF;
padding:8px;
border:2px outset #F6FAF4;
vertical-align: top;
}

Cuando tenemos los estilos definidos ya está todo listo para añadir nuestra imagen, la añadimos de la siguiente forma:

<img class="expando" src="url-de-la-imagen" width="100" border="0" height="100" />

» Con height (altura) y width (anchura) escogemos el tamaño que mostrará la imagen en miniatura.

Si deseamos añadir un grupo de imágenes:

<p><img class="expando nombre-imagen" border="0" src="url-imagen-1" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-2" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-3" width="100" height="100"></p>

» Donde url-imagen-1-2-3 lo sustituimos por la url de nuestra imagen.

» En nombre-imagen podemos añadir el nombre o título de nuestra imagen, de esa forma si tenemos que hacer una modificación sabremos sobre qué imagen la estamos haciendo.

Para el efecto del grupo de imágenes debemos tener especial cuidado que el tamaño real sea prudencial de no ser así tendríamos el siguiente problema.

¿Una solución? calcular que la suma de la imagen ampliada y las miniaturas no supere el width (ancho) de main-wrapper que es el espacio disponible para las entradas.

Eso es muy sencillo si consideramos que Blogger nos proporciona tres tamaños para las imágenes 200-320-400 de ser un tamaño distinto tendríamos que modificarlo con algún editor de imágenes.